Closes #14785

• Remove experimental feature
• Update doc to use the new approach
• Check all the customization demo to make sure it works correctly
• Write migration guide

We have 3 Argos diff:

• CustomTreeItemDemo: The indentation was broken before, the new one seems a lot better
• ContentSlot and ContentSlotProps: There is no longer an indentation on the box, if we want to keep it we need to reset manually the padding on this item, but I don't think it's worth adding that complexity on this demo

Changelog

Tree View

• The indentation of nested Tree Items is now applied on the content of the element.
  This is required to support features like the drag and drop re-ordering which requires every Tree Item to go to the far left of the Tree View.

  Apply custom indentation:

  If you used to set custom indentation in your Tree Item, you can use the new itemChildrenIndentation prop to do it while supporting the new DOM structure:

  <RichTreeView
    items={MUI_X_PRODUCTS}
    itemChildrenIndentation={24}
    defaultExpandedItems={['grid']}
  />

  See Tree Item Customization—Change nested item's indentation for more details.

  Fallback to the old behavior:

  If you used to style your content element (for example to add a border to it) and you don't use the drag and drop re-ordering, you can manually put the padding on the group transition element to restore the previous behavior:

  const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
    // Remove the additional padding of nested elements
    padding: theme.spacing(0.5, 1),
  }));
  
  const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)({
    // Add the padding back on the group transition element
    paddingLeft: 'var(--TreeView-itemChildrenIndentation) !important',
  });